import './auxiliary.less';
import { Table, Space, Switch, Popover, Button, Modal, Form, Input,Popconfirm, message} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState,useEffect } from 'react';
import {getAuxil,addAuxil,delAuxil} from '@/services/settings/auxilRequest'
import { From } from '../../financial';
interface FieldType {
    sobId: number;
    createAddress: string;
    businessType: number;
    cusContacts:string;
    cusName:string;
    cusPhone:string;
    dutyParagraph:string;
};

interface Addauxil {
    isModalOpen: boolean;
    onCreate: (values: FieldType) => void;
    onCancel: () => void;
}

const CollectionAddForm: React.FC<Addauxil> = ({
    isModalOpen,
    onCreate,
    onCancel,
}) => {
    const [addFrom] = Form.useForm();
    return (
        <Modal
            open={isModalOpen}
            title="添加客户"
            okText="确认"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                addFrom
                    .validateFields()
                    .then((values) => {
                        addFrom.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
            form={addFrom}
                name="basic"
                initialValues={{
                    businessType: 1,
                    createAddress: "",
                    cusContacts: "",
                    cusName: "",
                    cusPhone: "",
                    dutyParagraph: "",
                    sobId: 0
                  }}
                className='addCustomer'
            >
                <Form.Item<FieldType>    
                    name="businessType"
                    style={{display:'none'}}>
                    <Input/>
                </Form.Item>
                <Form.Item<FieldType>
                    label="客户名称"
                    name="cusName"
                    rules={[{ required: true, message: 'Please input your username!' },
                    {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,20}$/,message:'客户名称必须是2-20个字符'}]}
                >
                    <Input placeholder='请填写客户名称'/>
                </Form.Item>
                <Form.Item<FieldType>
                    label="联系人"
                    name="cusContacts"
                    rules={[{ required: true, message: 'Please input your username!' },
                    {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,20}$/,message:'联系人必须是2-20个字符'}]}
                >
                    <Input placeholder='请填写客户联系人'/>
                </Form.Item>
                <Form.Item<FieldType>
                    label="联系方式"
                    name="cusPhone"
                    rules={[{ required: true, message: 'Please input your username!' },
                {pattern:/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,message:'请输入正确的手机号码格式！'}
                ]}
                >
                    <Input placeholder='请填写客户联系方式' type="tel" required />
                </Form.Item>
                <Form.Item<FieldType>
                    label="联系地址"
                    name="createAddress"
                    rules={[{ required: true, message: 'Please input your username!' },
                {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,50}$/,message:'联系地址必须是2-50个字符'}]}
                >
                    <Input placeholder='请填写客户联系地址'/>
                </Form.Item>
                <Form.Item<FieldType>
                    label="客户税号"
                    name="dutyParagraph"
                    rules={[{ required: true, message: 'Please input your username!' },
                    {pattern:/^[\\u4E00-\\u9FA5A-Za-z0-9]{2,50}$/,message:'税号必须是2-50个字符'}]}
                >
                    <Input placeholder='请填写客户税号'/>
                </Form.Item>
            </Form>
        </Modal>
    );
};
const Auxiliary: React.FC =()=> {
    useEffect(()=>{
        render();
    },[])
    const render = async ()=>{
        const {data,code} = await getAuxil()
        
       if(code==0){
        setData(data)
       }
    }
    //删除
    const confirm=async(cusId: string)=>{
        const {code}=await delAuxil(cusId)
        if(code==0){
           message.success('删除成功')
           render()
        }
        
   }
   const cancel = (e: any) => {
       console.log(e);
       message.error('Click on No');
   };
//添加 
const onCreate = async (values: any) => {
    console.log(values, 22);

    const { code } = await addAuxil(values)
    if (code == 1000) {
        render()
        message.success('添加成功')
        setIsModalOpen(false);
    }
};
    const [data,setData] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);//客户添加模态框
    const [isModalOpenSupplier, setIsModalOpenSupplier] = useState(false);//供应商添加模态框
    const [showModalEdit, setIsModalOpenEdit] = useState(false);//客户编辑模态框
    const [showModalSupEdit, setIsModalOpenSupEdit] = useState(false);//客户编辑模态框
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [activeButton, setActiveButton] = useState(1);//  按钮颜色切换
    const btnClick = (buttonIndex: any) => {
        setActiveButton(buttonIndex);
    };
    // 表单
    const onFinish = (values: any) => {
        console.log(111);
        
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    type FieldType = {
        dutyParagraph?: string;
        sobId?: number;
        cusPhone?: string;
        cusName?:string;
        cusContacts?:string;
        createAddress?:string;
        businessType?:string
    };
    // 供应商模态框
    type SupplierType = {
        nameSupplier?: string;
        contactsSupplier?: string;
        informationSupplier?: string;
        addressSupplier?:string;
        taxSupplier?:string;
    };
    // 客户添加模态框
    const showModal = () => {
        setIsModalOpen(true);
    };
    const [addFrom] = Form.useForm()

    const handleOk = async() => {  
        let form:FieldType = addFrom.getFieldsValue()
        console.log(form);
        const data = await addAuxil(form)
        console.log(data);
        
        // if(code == 200){
        //     message.success("添加成功")
        //     setIsModalOpen(false);
        // }
       
    };
   
    const handleCancel = () => {
        setIsModalOpen(false);
    };
     // 供应商添加模态框
     const showModalSupplier = () => {
        setIsModalOpenSupplier(true);
    };

    const handleOkSupplier = () => {
        setIsModalOpenSupplier(false);
    };

    const handleCancelSupplier = () => {
        setIsModalOpenSupplier(false);
    };
    // 编辑模态框
    type EditFieldType = {
        usernameEdit?: string;
        contactsEdit?: string;
        inforEdit?: string;
        addressEdit?:string;
        taxEdit?:string;
    };
    // 供应商模态框
    type EditSupplierType = {
        nameSupEdit?: string;
        contactsSupEdit?: string;
        inforSupEdit?: string;
        addressSupEdit?:string;
        taxSupEdit?:string;
    };
    // 客户编辑模态框
    const EditshowModal = () => {
        setIsModalOpenEdit(true);
    };

    const EdithandleOk = () => {
        setIsModalOpenEdit(false);
    };

    const EdithandleCancel = () => {
        setIsModalOpenEdit(false);
    };
     // 供应商编辑模态框
     const EditshowModalSup = () => {
        setIsModalOpenSupEdit(true);
    };

    const EdithandleOkSup = () => {
        setIsModalOpenSupEdit(false);
    };

    const EdithandleCancelSup = () => {
        setIsModalOpenSupEdit(false);
    };
    //添加按钮弹出框

    const content = (
        <div>
            <p>
                <button onClick={showModal}>添加客户</button>
            </p>
            <p>
                <button onClick={showModalSupplier}>添加供应商</button>
            </p>
        </div>
    );
    //编辑按钮弹出框

    const contentEdit = (
        <div>
            <p>
                <button onClick={EditshowModal}>编辑客户</button>
            </p>
            <p>
                <button onClick={EditshowModalSup}>编辑供应商</button>
            </p>
        </div>
    );

    interface AuxilData {
        key: React.Key;
        cusId: string;//编号
        state: string;
        cusPhone: number;//联系方式
        cusContacts: string;//联系人
        operate: string;
        cusName: string;//名称
    }
    const columns: ColumnsType<AuxilData> = [
        {
            title: '编号',
            dataIndex: 'cusId',
        },
        {
            title: '名称',
            dataIndex: 'cusName',
        },
        {
            title: '联系方式',
            dataIndex: 'cusPhone',
        },
        {
            title: '联系人',
            dataIndex: 'cusContacts',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (_, record) => (
                <Space direction="vertical">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                </Space>
            ),
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (_, record) => (
                <Space size="middle">
                    <Popover placement="bottom" content={contentEdit} trigger="click">
                        <a className='addBtn'>编辑</a>
                    </Popover>
                    <Popconfirm
                        title="删除"
                        description="确定删除吗?"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={()=>{confirm(record.cusId)}}
                        onCancel={cancel}
                    >
                        <a >删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

   
    return <div>
        <div className='public'>
            <div className='publicTit'>
                辅助核算管理
                <div></div>
            </div>
            <hr />
        </div>
        <div className='auxilBox'>
            <div className="auxilBtn">
                <button className={activeButton === 1 ? 'auxilTabBtn' : ''} onClick={() => btnClick(1)}>
                    客户
                </button>
                <button className={activeButton === 2 ? 'auxilTabBtn' : ''} onClick={() => btnClick(2)}>
                    供应商
                </button>
                <button className={activeButton === 3 ? 'auxilTabBtn' : ''} onClick={() => btnClick(3)}>
                    职员
                </button>
                <button className={activeButton === 4 ? 'auxilTabBtn' : ''} onClick={() => btnClick(4)}>
                    部门
                </button>
            </div>
            <div style={{ clear: 'both', whiteSpace: 'nowrap' }} >
                <Popover placement="bottom" content={content} trigger="click">
                    <button className='addBtn'>创建</button>
                </Popover>
            </div>
        </div>
         {/* 增加的模态框 */}
         <CollectionAddForm isModalOpen={isModalOpen}
            onCreate={onCreate}
            onCancel={() => {
                setIsModalOpen(false);
            }} />
        {/* 增加供应商模态框 */}
        <Modal title="添加供应商" open={isModalOpenSupplier} onOk={handleOkSupplier} onCancel={handleCancelSupplier} okText="确认" cancelText="取消">
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                // form={addFrom}
                // onFinishFailed={onFinishFailed}
                className='addCustomer'
            >
                <Form.Item<SupplierType>
                    label="供应商名称"
                    name="nameSupplier"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商名称'/>
                </Form.Item>
                <Form.Item<SupplierType>
                    label="联系人"
                    name="contactsSupplier"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系人'/>
                </Form.Item>
                <Form.Item<SupplierType>
                    label="联系方式"
                    name="informationSupplier"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系方式' type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
                </Form.Item>
                <Form.Item<SupplierType>
                    label="联系地址"
                    name="addressSupplier"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系地址'/>
                </Form.Item>
                <Form.Item<SupplierType>
                    label="税号"
                    name="taxSupplier"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商税号'/>
                </Form.Item>
            </Form>
        </Modal>

        {/* 编辑客户模态框 */}
        <Modal title="编辑客户" open={showModalEdit} onOk={EdithandleOk} onCancel={EdithandleCancel} okText="确认" cancelText="取消">
            <Form
                name="basic"
                initialValues={{ remember: true }}
                className='addCustomer'
            >
                <Form.Item<EditFieldType>
                    label="客户名称"
                    name="usernameEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写客户名称'/>
                </Form.Item>
                <Form.Item<EditFieldType>
                    label="联系人"
                    name="contactsEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写客户联系人'/>
                </Form.Item>
                <Form.Item<EditFieldType>
                    label="联系方式"
                    name="inforEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写客户联系方式' type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
                </Form.Item>
                <Form.Item<EditFieldType>
                    label="联系地址"
                    name="addressEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写客户联系地址'/>
                </Form.Item>
                <Form.Item<EditFieldType>
                    label="客户税号"
                    name="taxEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写客户税号'/>
                </Form.Item>
            </Form>
        </Modal>
        {/* 编辑供应商模态框 */}
        <Modal title="编辑供应商" open={showModalSupEdit} onOk={EdithandleOkSup} onCancel={EdithandleCancelSup} okText="确认" cancelText="取消">
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                className='addCustomer'
            >
                <Form.Item<EditSupplierType>
                    label="供应商名称"
                    name="nameSupEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商名称'/>
                </Form.Item>
                <Form.Item<EditSupplierType>
                    label="联系人"
                    name="contactsSupEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系人'/>
                </Form.Item>
                <Form.Item<EditSupplierType>
                    label="联系方式"
                    name="inforSupEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系方式' type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
                </Form.Item>
                <Form.Item<EditSupplierType>
                    label="联系地址"
                    name="addressSupEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商联系地址'/>
                </Form.Item>
                <Form.Item<EditSupplierType>
                    label="税号"
                    name="taxSupEdit"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input placeholder='请填写供应商税号'/>
                </Form.Item>
            </Form>
        </Modal>
        <Table className="auxilTab"
            rowSelection={{
                type: selectionType,
            }}
            columns={columns}
            dataSource={data}
            pagination={false}
        />
    </div>
}
export default Auxiliary